<template>
  <!--访客数据展示-->
  <div class="contentRight" style="background-color: #f0f2f5;">
    <a-row type="flex" class="marginBottom" style="width: 100%;flex-wrap: nowrap;">
      <!--第一排左侧-->
      <a-col flex="60%" style="background-color: #fff;border-radius: 2px;">
          <!--<a-card size="small" :bordered="false">-->
          <!--&lt;!&ndash;顶部统计&ndash;&gt;-->
          <!--<a-row :gutter="10">-->
          <!--<a-col :span="8">-->
          <!--<a-card size="small" :bordered="false" style="text-align: center;">-->
          <!--<a-statistic-->
          <!--title="访问中"-->
          <!--:value="reservationsAllNumbers"-->
          <!--suffix="人"-->
          <!--class="demo-class"-->
          <!--&gt;-->
          <!--</a-statistic>-->
          <!--</a-card>-->
          <!--</a-col>-->
          <!--<a-col :span="8">-->
          <!--<a-card size="small" :bordered="false" style="text-align: center;">-->
          <!--<a-statistic-->
          <!--title="访问结束"-->
          <!--:value="visitorsAllNumbers"-->
          <!--suffix="人"-->
          <!--class="demo-class"-->
          <!--&gt;-->
          <!--</a-statistic>-->
          <!--</a-card>-->
          <!--</a-col>-->
          <!--<a-col :span="8">-->
          <!--<a-card size="small" :bordered="false" style="text-align: center;">-->
          <!--<a-statistic-->
          <!--title="未到访"-->
          <!--:value="allVisitingNumbers"-->
          <!--suffix="人"-->
          <!--class="demo-class"-->
          <!--&gt;-->
          <!--</a-statistic>-->
          <!--</a-card>-->
          <!--</a-col>-->
          <!--</a-row>-->
          <!--</a-card>-->

          <h3 class="sflTitle">舍弗勒中国地区访客系统实时数据显示</h3>

          <!--地图-->
          <div class="divbox">
            <div class="mapflex flex" style="">
              <div class="baseMapBg"></div>
              <!--<img src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/baseMap.jpg" style="height: 90%"/>-->
            </div>
          </div>
      </a-col>

      <!--<a-col flex="10px"></a-col>-->
      <!--第一排右侧-->
      <a-col style="border-radius: 2px;width: 40%;">
        <div class="marginLeft10">
          <div style="padding: 30px 0px 20px 0; min-height: 480px; background-color: #fff;">
            <a-card size="small" :bordered="false" style="text-align: center;">
              <p style="font-size: 20px;margin-bottom: 0;">今日预约人数</p>
              <a-statistic
                title=""
                :value="allCount.allCountNum"
                suffix="人"
                class="demo-class"
              >
              </a-statistic>
            </a-card>

            <a-card size="small" :bordered="false">
              <!--顶部统计-->
              <a-row :gutter="10">
                <a-col :span="8">
                  <a-card size="small" :bordered="false" style="text-align: center;">
                    <a-statistic
                      title="访问中"
                      :value="allCount.notOutCount"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <a-card size="small" :bordered="false" style="text-align: center;">
                    <a-statistic
                      title="访问结束"
                      :value="allCount.endOfVisit"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <a-card size="small" :bordered="false" style="text-align: center;">
                    <a-statistic
                      title="未到访"
                      :value="allCount.notVisited"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </a-card>
                </a-col>
              </a-row>
            </a-card>
            <div style="position: relative;min-height: 200px">
              <!--自定义加载中-->
              <div class="zhezhaoBase" v-if="loadingAll">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

              <div v-else>
                <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                     v-if="allBaseData.length == 0">
                  <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                       class="flex">此区域未查询到数据
                  </div>
                </div>
                <!--图表-->
                <div v-else id="container" class="charthuan" style="width: 90%;"></div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

    <!--第二排-->
    <a-row class="marginBottom" style="width: 100%;display: flex">
      <a-col style="border-radius: 2px;width: 50%">
        <div class="wahiteBgcHeight100">
          <a-card size="small" title="安亭基地" :bordered="false" style="margin-bottom: 10px"
                  :bodyStyle="{'min-height':'410px'}">
            <!--筛选条件不需要-->
            <!--<template slot="extra">-->
            <!--<a-dropdown>-->
            <!--<a class="ant-dropdown-link menuA">-->
            <!--{{antingAreaName}}-->
            <!--<a-icon type="down"/>-->
            <!--</a>-->
            <!--<a-menu slot="overlay" @click="handleClick">-->
            <!--<a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.id" :value="item.areaName">-->
            <!--{{item.areaName}}-->
            <!--</a-menu-item>-->
            <!--</a-menu>-->
            <!--</a-dropdown>-->
            <!--</template>-->

            <!--顶部统计-->
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="今日预约人数"
                      :value="antingCount.allCountNum"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问中"
                      :value="antingCount.notOutCount"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问结束"
                      :value="antingCount.endOfVisit"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="未到访"
                      :value="antingCount.notVisited"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
            </a-row>

            <div style="position: relative;min-height: 300px">
              <!--自定义加载中-->
              <div class="zhezhaoBase" v-if="loadingAnting">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

              <div v-else>
                <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                     v-if="antingData.length == 0">
                  <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                       class="flex">此区域未查询到数据
                  </div>
                </div>
                <!--图表-->
                <div v-else id="antingContainer" class="chartzhu5"></div>
              </div>
            </div>
          </a-card>
        </div>
      </a-col>
      <!--<a-col style="width:10px"></a-col>-->
      <a-col style="border-radius: 2px;width: 50%;">
        <div class="marginLeft10">
          <a-card size="small" title="银川基地" :bordered="false" :bodyStyle="{'min-height':'410px'}">
            <!--筛选条件不需要-->
            <!--<template slot="extra">-->
            <!--<a-dropdown>-->
            <!--<a class="ant-dropdown-link menuA">-->
            <!--{{yinchuanAreaName2}}-->
            <!--<a-icon type="down"/>-->
            <!--</a>-->
            <!--<a-menu slot="overlay" @click="handleClickYinchuan2">-->
            <!--<a-menu-item class="menuA" v-for="item in yinchuanAreaList" :key="item.id" :value="item.areaName">-->
            <!--{{item.areaName}}-->
            <!--</a-menu-item>-->
            <!--</a-menu>-->
            <!--</a-dropdown>-->
            <!--</template>-->

            <!--顶部统计-->
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="今日预约人数"
                      :value="yinchuanCount.allCountNum"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问中"
                      :value="yinchuanCount.notOutCount"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问结束"
                      :value="yinchuanCount.endOfVisit"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="未到访"
                      :value="yinchuanCount.notVisited"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>

            </a-row>


            <div style="position: relative;min-height: 300px">
              <!--自定义加载中-->
              <div class="zhezhaoBase" v-if="loadingYinchuan">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

              <div v-else>
                <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                     v-if="yinchuanData.length == 0">
                  <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                       class="flex">此区域未查询到数据
                  </div>
                </div>
                <!--图表-->
                <div v-else id="containerYinchuan2" class="chartzhu5"></div>
              </div>
            </div>
          </a-card>
        </div>
      </a-col>
    </a-row>

    <!--第三排-->
    <a-row class="marginBottom" style="width: 100%">
      <a-col style="background-color: #fff;border-radius: 2px;">
        <a-card size="small" title="太仓基地" :bordered="false" :bodyStyle="{'min-height':'410px'}">
          <template slot="extra">
            <a-dropdown>
              <a class="ant-dropdown-link menuA">
                {{taicangAreaName}}
                <a-icon type="down"/>
              </a>
              <a-menu slot="overlay" @click="handleClickTaiCang">
                <a-menu-item class="menuA" v-for="item in taicangAreaAll" :key="item.id" :value="item.name">
                  {{item.name}}
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>


          <a-card size="small" :bordered="false">
            <!--顶部统计-->
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <a-statistic
                    title="今日预约人数"
                    :value="taicnagCount.allCountNum"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <a-statistic
                    title="访问中"
                    :value="taicnagCount.notOutCount"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <a-statistic
                    title="访问结束"
                    :value="taicnagCount.endOfVisit"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <a-statistic
                    title="未到访"
                    :value="taicnagCount.notVisited"
                    suffix="人"
                    class="noOutCount"
                  >
                  </a-statistic>
                </a-card>
              </a-col>
            </a-row>
          </a-card>


          <div style="position: relative;min-height: 300px">
            <!--自定义加载中-->
            <div class="zhezhaoBase" v-if="loadingTaicang">
              <a-spin tip="加载中...">
              </a-spin>
            </div>

            <div v-else>
              <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                   v-if="taicangData.length == 0">
                <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                     class="flex">此区域未查询到数据
                </div>
              </div>
              <!--图表-->
              <div v-else id="containerTaiCang" class="chartzhu5"></div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!--第四排-->
    <a-row class="marginBottom" style="width: 100%;display: flex">
      <a-col style="border-radius: 2px;width: 50%">
        <div class="wahiteBgcHeight100">
          <a-card size="small" title="湘潭基地" :bordered="false">
            <div class="areaNotOpened">
              该区域暂未开通
            </div>
          </a-card>
        </div>
      </a-col>
      <!--<a-col style="width:10px"></a-col>-->
      <a-col style="border-radius: 2px;width: 50%">
        <div class="marginLeft10">
          <a-card size="small" title="苏州基地" :bordered="false">
            <div class="areaNotOpened">
              该区域暂未开通
            </div>
          </a-card>
        </div>
      </a-col>
    </a-row>

    <!--第五排-->
    <a-row type="flex" class="marginBottom" style="width: 100%">
      <a-col flex="100%" style="background-color: #fff;border-radius: 2px;">
        <a-card size="small" title="南京基地" :bordered="false">
          <div class="areaNotOpened">
            该区域暂未开通
          </div>
        </a-card>
      </a-col>
    </a-row>


  </div>
</template>

<script>
  import reservationApi from "@/api/reservation";
  import {Chart, registerShape} from '@antv/g2';

  export default {
    components: {},
    name: '',
    data() {
      return {

        aningAreaAll: [],
        antingData: [],
        loadingAnting: true,
        antingChart: null,  //安亭数据图形对象
        antingAreaName: "全部",
        antingAreaId: "",
        unapprovedNumbers: 0, //安亭未审批人数
        visitorsNumbers: 0, //安亭到访总人数
        reservationsNumbers: 0, //安亭预约总人数
        antingVisitingNumbers: 0, //安亭访问中人数
        antingCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },

        // 所有基地汇总数据
        loadingAll: true,
        allBaseData: [],
        allBaseChart: null,  //安亭数据图形对象
        reservationsAllNumbers: 0, //所有基地预约总人数
        visitorsAllNumbers: 0, //所有基地到访总人数
        unapprovedAllNumbers: 0, //所有基地未审批人数
        allVisitingNumbers: 0, //所有基地访问中人数
        allCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },

        intervalId: null,   //定时器，定时刷新页面


        // 银川基地
        loadingYinchuan: true,
        ycunapprovedNumbers: 0, //银川未审批人数
        ycvisitorsNumbers: 0, //银川到访总人数
        ycreservationsNumbers: 0, //银川预约总人数
        yinchuanVisitingNumbers: 0, //银川访问中人数
        yinchuanData: [],
        yinchuanAreaList: [],
        yinchuanAreaName2: "全部",
        yinchuanAreaId2: "",
        yinchanChart: null,  //银川数据图形对象
        yinchuanCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },

        // 太仓基地
        taicangData: [
          // { name: '到访人数', areaOrDoor: '二厂', count: 12 },
          // { name: '到访人数', areaOrDoor: '三厂', count: 23 },
          // { name: '到访人数', areaOrDoor: '四厂', count: 23 },
          // { name: '到访人数', areaOrDoor: '五厂', count: 0 },
          // { name: '到访人数', areaOrDoor: '六厂', count: 0 },
          // { name: '到访人数', areaOrDoor: '七厂', count: 0 },
          //
          // { name: '预约人数', areaOrDoor: '二厂', count: 18 },
          // { name: '预约人数', areaOrDoor: '三厂', count: 28 },
          // { name: '预约人数', areaOrDoor: '四厂', count: 18 },
          // { name: '预约人数', areaOrDoor: '五厂', count: 0 },
          // { name: '预约人数', areaOrDoor: '六厂', count: 0 },
          // { name: '预约人数', areaOrDoor: '七厂', count: 28 },
        ],
        taicangAreaAll: [
          {id: 1, name: "按区域"},
          {id: 2, name: "按门"},
        ],
        loadingTaicang: true,
        taicangChart: null,  //太仓数据图形对象
        taicangAreaName: "按区域",
        taicangAreaId: "1",
        noApproveCount: 0, //太仓未审批人数
        daofangCount: 0, //太仓到访总人数
        yuyueCount: 0, //太仓预约总人数
        noOutCount: 0, //银川访问中人数
        taicnagCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },
      }
    },
    beforeMount() {
      // this.aningAreaAll = reservationApi.getAningAreaAll();
      // console.log(this.aningAreaAll);
      // this.getAntingAreaList();   //获取安亭区域
      // this.getYinchuanAreaList();   //获取银川区域
    },
    created() {
      // 定时更新页面数据
      this.dataRefreh();
    },
    destroyed() {
      // 在页面销毁后，清除计时器
      this.clear();
    },
    mounted() {
      this.fristLoad();
    },
    methods: {
      // 获取安亭基地的区域
      async getAntingAreaList() {
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
        // console.log(res.data);
        if (res.data.success) {
          this.aningAreaAll = [{areaName: "全部", id: ""}];
          this.aningAreaAll = [...this.aningAreaAll, ...res.data.result];
          // console.log(this.aningAreaAll);
        } else {
          this.$message.error(res.data.message);
        }

      },
      // 获取银川基地的区域
      async getYinchuanAreaList() {
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 102})
        // console.log(res.data);
        if (res.data.success) {
          this.yinchuanAreaList = [{areaName: "全部", id: ""}];
          this.yinchuanAreaList = [...this.yinchuanAreaList, ...res.data.result];
          // this.yinchuanAreaName2 = this.yinchuanAreaList[0].areaName;
          // this.yinchuanAreaId2 = this.yinchuanAreaList[0].id;
          // console.log(this.yinchuanAreaList);
        } else {
          this.$message.error(res.data.message);
        }
      },
      // 定时刷新数据函数
      dataRefreh() {
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
          return;
        }
        // 计时器为空，操作
        this.intervalId = setInterval(() => {
          // console.log("刷新" + new Date());
          this.getAllVisitCase(); //加载数据函数
          this.loadDataRegularly();
        }, 20000);
      },
      // 停止定时器
      clear() {
        clearInterval(this.intervalId); //清除计时器
        this.intervalId = null; //设置为null
      },
      // 进入页面第一次加载
      async fristLoad() {
        this.loadingAll = true;
        this.loadingAnting = true;
        this.loadingYinchuan = true;
        this.loadingTaicang = true;
        await this.getAllVisitCase();
        await this.getAntingVisitCase();
        await this.getYinchuanVisitCase();
        await this.getTaiCangVisitCase();
        if (this.allBaseData.length != 0) {
          this.pieChartAll();
        }
        if (this.antingData.length != 0) {
          this.pieChartAnting()
        }
        if (this.yinchuanData.length != 0) {
          this.pieChartYinchuan()
        }
        if (this.taicangData.length != 0) {
          this.pieChartTaiCang()
        }

      },
      // 安亭基地切换区域
      async handleClick(e) {
        // console.log(e)
        this.antingAreaName = e.item.value;
        this.antingAreaId = e.key;
        await this.getAntingVisitCase();
        // console.log(this.antingData);
        if (this.antingData.length != 0) {
          this.antingChart.data(this.antingData);
          this.antingChart.render();
        }
      },
      // 银川基地切换区域
      async handleClickYinchuan2(e) {
        // console.log(e);
        this.yinchuanAreaName2 = e.item.value;
        this.yinchuanAreaId2 = e.key;
        await this.getYinchuanVisitCase();
        if (this.yinchuanData.length != 0) {
          this.yinchanChart.data(this.yinchuanData);
          this.yinchanChart.render();
        }
      },
      // 太仓基地切换区域或门
      async handleClickTaiCang(e) {
        // console.log(e)
        this.taicangAreaName = e.item.value;
        this.taicangAreaId = e.key;
        await this.getTaiCangVisitCase();    // 重新获取数据
        // console.log(this.taicangData);
        if (this.taicangData.length != 0) {
          this.taicangChart.data(this.taicangData);
          this.taicangChart.render();
        }
      },
      // 定时加载数据
      async loadDataRegularly() {
        await this.getAllVisitCase();
        await this.getAntingVisitCase();
        await this.getYinchuanVisitCase();
        await this.getTaiCangVisitCase();
        // console.log(this.antingData);
        if (this.allBaseData.length != 0) {
          this.allBaseChart.data(this.allBaseData);
          this.allBaseChart.render();
        }
        if (this.antingData.length != 0) {
          this.antingChart.data(this.antingData);
          this.antingChart.render();
        }
        if (this.yinchuanData.length != 0) {
          this.yinchanChart.data(this.yinchuanData);
          this.yinchanChart.render();
        }
        if (this.taicangData.length != 0) {
          this.taicangChart.data(this.taicangData);
          this.taicangChart.render();
        }

      },
      // 请求安亭基地数据
      async getAntingVisitCase() {
        let params = {
          visitBaseId: 100,
          lx: 1
        };

        let resp = await reservationApi.getStatistics(params);
        // console.log(resp);
        if (resp.data.success) {
          this.loadingAnting = false;
          this.antingData = [];
          let respData = resp.data.result;
          this.antingData = respData.areaAndDoor;
          this.antingCount = respData.allCount[0];
        } else {
          this.loadingAnting = false;
          this.$message.error(resp.data.message);
        }
      },
      // 请求银川基地数据
      async getYinchuanVisitCase() {
        let params = {
          visitBaseId: 102,
          lx: 1
        };

        let resp = await reservationApi.getStatistics(params);
        // console.log(resp);
        if (resp.data.success) {
          this.yinchuanData = [];
          this.loadingYinchuan = false;
          let respData = resp.data.result;
          this.yinchuanData = respData.areaAndDoor;  //柱状图数据
          this.yinchuanCount = respData.allCount[0];
        } else {
          this.loadingYinchuan = false;
          this.$message.error(resp.data.message);
        }
      },
      // 请求太仓基地数据，获取太仓基地数据
      async getTaiCangVisitCase() {
        // this.loading = true;
        let params = {
          visitBaseId: 20003,
          lx: this.taicangAreaId
        };

        let resp = await reservationApi.getStatistics(params);
        // console.log(resp);
        if (resp.data.success) {
          this.taicangData = [];
          this.loadingTaicang = false;
          let respData = resp.data.result;
          this.taicangData = respData.areaAndDoor;  //柱状图数据
          this.taicnagCount = respData.allCount[0];
        } else {
          this.loadingTaicang = false;
          this.$message.error(resp.data.message);
        }
      },
      // 请求所有基地数据
      async getAllVisitCase() {
        // this.loading = true;
        let params = {
          visitBaseId: "",
          lx: ""
        };
        let resp = await reservationApi.getStatistics(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.allBaseData = [];
          this.loadingAll = false;
          let respData = resp.data.result;
          this.allCount = respData.allCount[0];
          if (this.allCount.allCountNum != 0){
            this.allBaseData.push({
              type: '访问中',
              value: this.allCount.notOutCount
            });
            this.allBaseData.push({
              type: '访问结束',
              value: this.allCount.endOfVisit
            });
            this.allBaseData.push({
              type: '未到访',
              value: this.allCount.notVisited
            });
          }

          // allCountNum: 119   今日预约人数
          // endOfVisit: 38   访问结束
          // notOutCount: 14   访问中
          // notVisited: 67   未到访

        } else {
          this.loadingAll = false;
          this.$message.error(resp.data.message);
        }
      },
      // 所有访客数据饼图
      pieChartAll() {
        // const allBaseDatas = [
        //   { type: '访问中', value: 10 },
        //   { type: '访问结束', value: 11 },
        //   { type: '未到访', value: 15 },
        // ];
        const chart = new Chart({
          container: 'container',
          autoFit: true,
          height: 500,
        });
        this.allBaseChart = chart;
        chart.data(this.allBaseData);
        chart.coordinate('theta', {
          radius: 0.75,
          innerRadius: 0.8,
        });
        chart.tooltip(false);
        chart
          .interval()
          .adjust('stack')
          .position('value')
          .color('type', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .shape('slice-shape');

        chart.render();
      },
      // 安亭访客数据饼图
      pieChartAnting() {
        const chart = new Chart({
          container: 'antingContainer',
          autoFit: true,
          height: 300,
          padding: [20, 20, 60, 30],
        });
        this.antingChart = chart;
        chart.data(this.antingData);
        chart.scale('count', {
          nice: true,
        });
        chart.axis('areaOrDoor', {
          tickLine: null,
        });

        chart.axis('count', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });
        // chart.tooltip({
        //   showMarkers: false,
        //   shared: true,
        // });
        chart.tooltip(false);
        chart.legend(true);

        chart
          .interval()
          .position('areaOrDoor*count')
          .color('name', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .label('count', {
            offset: 10,
          }).adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
        chart.interaction('active-region');
        chart.render();
      },
      // 银川访客数据饼图
      pieChartYinchuan() {

        const chart = new Chart({
          container: 'containerYinchuan2',
          autoFit: true,
          height: 300,
          padding: [20, 20, 60, 30],
        });
        this.yinchanChart = chart;
        chart.data(this.yinchuanData);
        chart.scale('count', {
          nice: true,
        });
        chart.axis('areaOrDoor', {
          tickLine: null,
        });
        chart.axis('count', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });
        // chart.tooltip({
        //   showMarkers: false,
        //   shared: true,
        // });
        chart.tooltip(false);
        chart.legend(true);
        chart
          .interval()
          .position('areaOrDoor*count')
          .color('name', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .label('count', {
            offset: 10,
          }).adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
        chart.interaction('active-region');
        chart.render();
      },
      // 太仓访客数据饼图
      pieChartTaiCang() {
        const chart = new Chart({
          container: 'containerTaiCang',
          autoFit: true,
          height: 300,
          padding: [20, 20, 60, 30],
        });
        this.taicangChart = chart;
        chart.data(this.taicangData);
        chart.scale('count', {
          nice: true,
        });
        chart.axis('areaOrDoor', {
          tickLine: null,
        });

        chart.axis('count', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });
        // chart.tooltip({
        //   showMarkers: false,
        //   shared: true,
        // });
        chart.tooltip(false);
        chart.legend(true);

        chart
          .interval()
          .position('areaOrDoor*count')
          .color('name', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .label('count', {
            offset: 10,
          }).adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
        chart.interaction('active-region');
        chart.render();
      },


    },
  }
</script>
<style>
  .sflTitle {
    font-size: 30px;
    margin: 20px;
    text-align: center;
  }
</style>
